import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View } from '@tarojs/components'
import { AtListItem } from 'taro-ui'

import CTopbar from '@/components/CTopBar/index'
import { get_wallet_records_api } from './service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'

/**
 * 钱包记录
 */
class WalletRecords extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      walletRecords: [], //钱包记录数据
      pageSize: 20,
      pageNum: 1,
    }
  }

  componentDidMount() {
    this.get_wallet_records()
  }

  async get_wallet_records() {
    const { pageSize, pageNum } = this.state
    const params = {
      pageNum,
      pageSize,
    }
    await get_wallet_records_api(params).then(({ result, data }) => {
      this.setState({
        walletRecords: data,
      })
    })
  }

  render() {
    const walletType = ['', '收入', '支出']
    const amountType = ['', '提现', '购买', '分销']
    const { walletRecords } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='钱包记录' showBack></CTopbar>
        </View>
        <View className='main'>
          {walletRecords.map((item) => {
            return (
              <AtListItem
                className={item.walletType === 1 ? 'income' : 'expenditure'}
                title={walletType[item.walletType]}
                note={'交易时间：' + item.gmtCreate}
                extraText={amountType[item.amountType]}
              />
            )
          })}
        </View>
      </View>
    )
  }
}

export default WalletRecords
